<template>
  <el-container class="index-con">
        <el-header class="index-header">
            <HeadMenu></HeadMenu>
        </el-header>
        <el-container class="main-con">
            <el-aside width="200px">
                <BasicMenu></BasicMenu>
            </el-aside>
            <el-main  style="background-color: #FFFFFF; margin: 10px;">
               <RouterView></RouterView>
            </el-main>
        </el-container>
    </el-container>
</template>
<script setup lang="ts">
import HeadMenu from '../components/Menu/HeadMenu.vue';
import BasicMenu from '../components/Menu/BasicMenu.vue';
import {RouterView } from 'vue-router'
</script>

<style scoped>
.index-con {
    height: 100vh;
    width: 100%;
    box-sizing: border-box;
}

.aside {
    width: 64px !important;
    height: 100%;
    background-color: #334157;
    margin: 0px;
}

.asideshow {
    width: 240px !important;
    height: 100%;
    background-color: #334157;
    margin: 0px;
}

.main-con {
    background-color: #EEEEEE;
}

.index-header,
.index-main {
    background-color: #FFFFFF;
    padding: 0;
}
</style>
